<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
		<script type=text/javascript src="../vuex.js"></script>
	</head>
	<body>
		<div id="app">
			<child :model-value='"test"' :cname="'xy'"></child>
		</div>
		<script>
		
		const {h, ref, computed, onMounted, reactive} = Vue;
		const {createStore} = Vuex;
		
		// 创建一个新的 store 实例
		
		const store = createStore({
		  state () {
		    return {
		      count: 0,
			  age: 9,
			  name: 'xy',
			  sex: 'male'
		    }
		  },
		  mutations: {
		    increment (state) {
		      state.count++
		    }
		  }
		})
		
		const child = {
			props: ['modelValue','cname'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
		      
			  onMounted(function tt(){
				  console.log("the child is onMounted");
			  })
			  /*
			  const handleClick = () => {
			  	console.log("store = ",store)
				
			  }
			  return {handleClick}
			  */
			},
			methods:{
				handleClick:function() {
					console.log("store = ",store)
					console.log("store = ",this.$store)
					this.$store.commit('increment')
					console.log(this.$store.state.count)
				}
			},
			computed: {
			    count () {
			      //return store.state.count 频繁的访问state
				  return this.$store.state.count //已经注入到组件里面，可以直接访问
			    },
				age(){
					return this.$store.state.age
				},
				name(){
					return this.$store.state.name
				},
				sex(){
					return this.$store.state.sex
				},
			},
			template:`<div @click="handleClick">{{modelValue}}</div>
			<div @click="handleClick">{{count}}</div>
			<div @click="handleClick">{{age}}</div>
			<div @click="handleClick">{{name}}</div>
			<div @click="handleClick">{{sex}}</div>`
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
				
				onMounted(() => {
					console.log("the parent is onMounted");
					
				})
				
		        
		    },
			components:{
				child
			},
			methods:{
				
			}
		};
		const app = Vue.createApp(App);
		
		// 将 store 实例作为插件安装
	    app.use(store)
		app.mount('#app');
		
		
		</script>
	</body>
</html>
